<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
	body {
		font-family: Verdana, Geneva, sans-serif;
		font-size: 100%;
		color: #666;
		background-color: #fff;
		margin-left: 20px;
		margin-top: 20px;
		margin-right: 20px;
		margin-bottom: 20px;
	}
	
	a, a:hover, a:active, a:focus {
		outline:0;
		direction:ltr;
	}
	
	.wrapper {
		position:relative; height:25px;
	}
	
	.mainmenu {
		position:absolute;
		z-index:100;
		font-family:Verdana, Geneva, sans-serif;
		font-weight:normal;
		font-size:90%;
		line-height:25px;
		left:50%;
		margin-left:-303px;
		width:606px;
	}
	
	ul.menu {
		padding:0;
		margin:0;
		list-style:none;
		width:100px;
		overflow:hidden;
		float:left;
		margin-right:1px;
	}
	
	ul.menu a {
		background:#369;
		text-decoration:none;
		color:#fff;
		padding-left:5px;
	}
	
	ul.menu li.list {
		float:left;
		width:250px;
		margin:-32767px -125px 0px 0px;
		background:url(img/top1.png) no-repeat left bottom;
	}
	
	ul.menu li.list a.category {
		position:relative;
		z-index:50;
		display:block;
		float:left;
		width:120px;
		margin-top:32767px;
		background:transparent;
	}
	
	ul.menu li.list a.category:hover,
	ul.menu li.list a.category:focus,
	ul.menu li.list a.category:active {
		margin-right:1px;
		background-image:url(img/tophover1.png);
		background-repeat:no-repeat;
		background-position:left top;
	
	}
	
	ul.submenu {
		float:left;
		padding:25px 0px 0px 0px;
		margin:0;
		list-style:none;
		background-image:url(img/tophover1.png);
		background-repeat:no-repeat;
		background-position:left top;
		margin:-25px 0px 0px 0px;
	}
	
	ul.submenu li a {
		float:left;
		width:120px;
		background:#369;
		clear:left;
		color:#fff;
	}
	
	ul.submenu li a.endlist {
		background:url(img/bottom1.png);
	}
	
	ul.submenu li a.endlist:hover,
	ul.submenu li a.endlist:focus,
	ul.submenu li a.endlist:active {
		background:url(img/bottomhover1.png);
	}
	
	ul.submenu a:hover,
	ul.submenu a:focus,
	ul.submenu a:active {
		background:#900;
		margin-right:1px;
		color:#fff;
	}
</style>
</head>
<body>
	<div class="wrapper">

		<div class="mainmenu">
			<ul class="menu">
				<li class="list"><a class="category" href="#Home">Home</a></li>
			</ul>
			<ul class="menu">
				<li class="list"><a class="category" href="#about">About Us&nbsp;&nbsp;&raquo;</a>
					<ul class="submenu">
						<li><a href="#about1">About link 1</a></li>
						<li><a href="#about2">About link 2</a></li>
						<li><a href="#about3">About link 3</a></li>
						<li><a href="#about4">About link 4</a></li>
						<li><a class="endlist" href="#about5">About link 5</a></li>
					</ul></li>
			</ul>
			<ul class="menu">
				<li class="list"><a class="category" href="#articles">Articles&nbsp;&nbsp;&raquo;</a>
					<ul class="submenu">
						<li><a href="#articles1">Articles link 1</a></li>
						<li><a href="#articles2">Articles link 2</a></li>
						<li><a href="#articles3">Articles link 3</a></li>
						<li><a class="endlist" href="#articles4">Articles link 4</a></li>
					</ul></li>
			</ul>
			<ul class="menu">
				<li class="list"><a class="category" href="#news">News&nbsp;&nbsp;&raquo;</a>
					<ul class="submenu">
						<li><a href="#news1">News link 1</a></li>
						<li><a href="#news2">News link 2</a></li>
						<li><a class="endlist" href="#news3">News link 3</a></li>
					</ul></li>
			</ul>
			<ul class="menu">
				<li class="list"><a class="category" href="#donate">Donate</a></li>
			</ul>
			<ul class="menu">
				<li class="list"><a class="category" href="#contact">Contact</a></li>
			</ul>
		</div>
	</div>
</html>